<template>
	<view class="message u-common-shadow">
		<view class="trend_box" @click="goList">
			<view class="trend_text">
				<!-- <u-icon name="xiaoxi" custom-prefix="custom-icon" color="#2C76ED" size="44"></u-icon> -->
				<!-- <view class="u-font-26 u-font-bold u-m-l-10">查看我发布及我参加的{{messageName(type)}}动态</view> -->
				<view class="u-flex">
					<image v-for="(item,index) in data.images" :key="index" :src="item" mode="" class="avarar_img" :style="{zIndex: 20 - index }">
					</image>
					<!-- <view class="image_icon" v-if="data.reduct_num > 0">+{{data.reduct_num}}</view> -->
				</view>
				<view class="u-m-l-20">
					<view class="u-flex">
						<view class="u-font-30 u-color-puce u-font-bold">当前进行中的{{messageName(type)}}</view>
						<!-- <view class="tag_icon" v-if="data.reduct_num > 0">+{{data.reduct_num}}</view> -->
						<view class="tag_icon" v-if="data.trends_number > 0">{{data.trends_number}}</view>
					</view>

					<view class="u-m-t-10 u-font-24 u-color-gray">我发布及我参加的{{messageName(type)}}</view>
				</view>
			</view>

			<view class="trend_btn">我的{{messageName(type)}} ></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['data', 'type'],
		data() {
			return {
				list: ['http://medv-new.oss-cn-shanghai.aliyuncs.com/images/common/20240624648315583594.jpg',
					'http://medv-new.oss-cn-shanghai.aliyuncs.com/images/common/20240624648315583594.jpg',
					'http://medv-new.oss-cn-shanghai.aliyuncs.com/images/common/20240624648315583594.jpg'
				]
			}
		},
		methods: {
			messageName(type) {
				let title = ''
				switch (type) {
					case 1:
						title = '酒局'
						break;
					case 2:
						title = '活动'
						break
				}
				return title
			},
			goList() {
				switch (this.type) {
					case 1:
						uni.navigateTo({
							url: "/pages/myBureau/myBureau?isAll=1"
						})
						break;
					case 2:
						uni.navigateTo({
							url: "/pages/myActivity/myActivity"
						})
						break
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.message {
		background: #fff;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		// padding-top: 20rpx;
		border-radius: 20rpx;
		margin: 20rpx;

		.trend_box {
			padding: 14rpx 0rpx;
			margin: 0 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// border-top: 1rpx solid #ccc;

			.trend_text {
				display: flex;
				align-items: center;
				flex: 1;
			}

			.trend_btn {
				background: linear-gradient(to right, #B67642,#E6BF91);
				color: #fff;
				padding: 20rpx 30rpx;
				border-radius: 50rpx;
				font-size: 24rpx;
			}
		}
	}



	.avarar_img {
		width: 70rpx;
		height: 70rpx;
		border-radius: 20rpx;
		border: 4rpx solid #fff;

		&:not(:first-child) {
			margin-left: -56rpx;
		}
	}

	.image_icon {
		width: 68rpx;
		height: 68rpx;
		border-radius: 100%;
		border: 4rpx solid #fff;
		background: #FF7946;
		color: #FFF;
		margin-left: -20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tag_icon {
		font-size: 21rpx;
		background: #B3723E;
		color: #fff;
		padding: 5rpx 10rpx;
		border-radius: 10rpx;
		margin-left: 10rpx;
	}
</style>